<script setup lang="ts">
import { ref, watch } from "vue"
import { taskStatusMap } from "@@/constants/other-keys"

interface Props {
  id: string | undefined
  visible: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(["closeDialog"])
const dialogVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const activeTab = ref<number>(1)
const hoverTabId = ref<number | null>(null)

const steps = ref<any[]>([
  {
    id: 1,
    title: "智能体",
    svg: "zhinengti"
  },
  {
    id: 2,
    title: "仿真想定",
    svg: "xiangding"
  },
  {
    id: 3,
    title: "训练任务",
    svg: "xunlian"
  },
  {
    id: 4,
    title: "推演任务",
    svg: "tuiyan"
  },
  // {
  //   id: 5,
  //   title: "评估任务",
  //   svg: "pinggu"
  // }
])
const tableData = ref<any[]>([])
const getRowKeys = (row: any) => {
  return row.id
}
const closeDialog = (type?: string) => {
  emit("closeDialog", type)
}
const handleCloseTip = (done: () => void) => {
  closeDialog()
  done()
}
const handleConfirm = () => {
  // closeDialog()
}
const handleMouseEnter = (id: number) => {
  hoverTabId.value = id
}
const handleMouseLeave = () => {
  hoverTabId.value = null
}
watch(
  () => [props.id, props.visible],
  () => {
    dialogVisible.value = props.visible
  }
)
</script>

<template>
  <el-drawer v-model="dialogVisible" direction="rtl" size="800px" @close-auto-focus="closeDialog" @close="closeDialog"
    :before-close="handleCloseTip" :show-close="false">
    <template #header>
      <div class="drawer-header">
        <h4>导出</h4>
      </div>
    </template>
    <template #default>
      <div class="cpi-content">
        <el-tabs v-model="activeTab" class="sim_engine-tabs">
          <el-tab-pane v-for="step in steps" :key="step.id" :name="step.id">
            <template #label>
              <span class="custom-tabs-label"
                @mouseenter="handleMouseEnter(step.id)"
                @mouseleave="handleMouseLeave">
                <SvgIcon
                  :name="step.svg"
                  class="tab-icon"
                />
                <span>{{ step.title }}</span>
              </span>
            </template>
            <div class="tab-content">
              <el-table ref="tableRef" :data="tableData" v-loading="loading" show-overflow-tooltip :row-key="getRowKeys">
                <el-table-column type="selection" align="center" :reserve-selection="true" width="55" />
                <el-table-column
                  :prop="step.id === 1 ? 'agent_name' : step.id === 2 ? 'scn_name' : step.id === 3 ? 'train_name' : 'train_name'"
                  label="名称" header-align="left" width="300">
                </el-table-column>
                <el-table-column v-if="step.id === 1" prop="agent_type" label="类型" header-align="left"
                  width="300"></el-table-column>
                <el-table-column v-if="step.id === 2" prop="scn_start_time" label="仿真开始时间" header-align="left"
                  width="300"></el-table-column>
                <el-table-column v-if="step.id === 2" prop="scn_end_time" label="仿真结束时间" header-align="left"
                  width="300"></el-table-column>
                <el-table-column v-if="step.id === 3 || step.id === 4"
                  :prop="step.id === 3 ? 'train_status' : 'train_status'" label="运行状态" header-align="left" width="300">
                  <template #default="{ row }">
                    <div class="status-tag" :class="`_${row.task_status}`">
                      {{ taskStatusMap[row.task_status] }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :prop="step.id === 1 ? 'agent_describe' : step.id === 2 ? 'scn_describe' : step.id === 3 ? 'train_describe' : 'train_describe'"
                  label="描述" header-align="left" min-width="250" />
                <el-table-column prop="create_time" label="创建时间" header-align="left" width="250" />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button plain @click="closeDialog()">
          取 消
        </el-button>
        <el-button :loading="loading" type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.custom-tabs-label {
  display: flex;
  align-items: center;

  .svg-icon {
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
  }

  span {
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
}

.tab-icon {
  stroke: currentColor;
  stroke-width: 1.5;
}

:deep(.sim_engine-tabs .el-tabs__nav-scroll) {
  .el-tabs__item {
    padding: 0 20px !important;

    &:hover {
      color: #02ebc3 !important;

      :deep(svg) {
        stroke: #02ebc3 !important;
      }
    }

    &.is-active {
      color: #02ebc3 !important;

      :deep(svg) {
        stroke: #02ebc3 !important;
      }
    }

    & > span {
      padding: 0 13px !important;
    }
  }

  .el-tabs__active-bar {
    background-color: #02ebc3 !important;
  }
}
</style>
